import { inputCpmGetter, t, useFormItemConfig } from '@/utils/common'
import { FormManager } from '@longnows/ui'
import { Button, Modal } from 'ant-design-vue'
import { FunctionalComponent, ref } from 'vue'

export const useCommonModalHook = () => {
  const isCommonModalShow = ref(false)

  const openCommonModal = () => {
    isCommonModalShow.value = true
  }
  const save = () => {
    console.log(methods.getFieldsValue())
  }

  <% if (typeof formFields !== 'undefined' && Array.isArray(formFields) && formFields.length > 0) { %>
  const schemas = ref<SchemaCpm[]>([
    <% formFields.forEach(function(param) { %>
      {
        ...useFormItemConfig('<%= param.description %>', '<%= param.fieldName %>', 8),
        ...inputCpmGetter(null, {}),
      },
    <% }); %>
  ])
    <% } else { %>
  const schemas = ref<SchemaCpm[]>([
    {
      ...useFormItemConfig('企业名称', 'name', 8),
      ...inputCpmGetter(null, {}),
    },
  ])
    <% } %>

  const { FormEl, wrapMethods: methods } = FormManager.createForm({
    formProps: {
      labelWidth: 100,
      schemas: schemas,
      disabled: false,
    },
  })

  const CommonModal: FunctionalComponent = () => {
    return isCommonModalShow.value ? (
      <Modal
        title={t('弹框模板')}
        visible={isCommonModalShow.value}
        onCancel={() => {
          isCommonModalShow.value = false
        }}
        footer={null}
        width={1200}
        destroyOnClose={true}
      >
        <div style={'margin: 20px;min-height: 200px;'}>
          <FormEl></FormEl>
        </div>
        <div style={'width:100%;display: flex;justify-content: center;padding: 20px;gap: 20px;'}>
          <Button
            onClick={() => {
              isCommonModalShow.value = false
            }}
          >
            {t('取消')}
          </Button>
          <Button type="primary" onClick={save}>
            {t('保存')}
          </Button>
        </div>
      </Modal>
    ) : null
  }

  return { openCommonModal, CommonModal }
}
